import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, RoutesRecognized } from '@angular/router';
import { CanDraw } from '../../common/draw/draw.component';
import { PsMachineService } from '../../common/PsMachine.service';
import { EsCommonService } from '../../common/escommon.service';

@Component({
  templateUrl: './workflow.detail.html',
  styleUrls: ['./workflow.detail.css', '../../app.component.css']
})
export class WorkFlowDetailComponent implements CanDraw, OnInit {
  @ViewChild('canvas_rank') canvas_rank: ElementRef;
  data: any;
  canvas: any;
  nodes: any;
  detail_show: boolean = false;
  detail = {
    top: 0,
    left: 0,
    name: '',
    role: null,
    params: null,
  }
  detailContent: any;
  icons = [
    '',
    '',
    '',
    '',
    ''
  ];
  leftPointWidth: any;

  constructor(private esCommonService: EsCommonService, private elementRef: ElementRef) { }

  ngOnInit(): void {
    console.log(this.data);
    this.canvas = this.canvas_rank.nativeElement;
    let width, height;
    let sartLeftPoint = 0;
    let sartTopPoint = 0;
    let workFlowType = null;

    if (this.data.name === '云主机审批流程') {
      workFlowType = 1;
      width = window.innerWidth * 0.66 - 100;
      height = window.innerHeight * 0.9 - 120;
      this.canvas.width = width;
      this.canvas.height = height;
      this.nodes = [
        {
          id: 0,
          left: 0,
          top: 0,
          width: 102,
          name: '流程开始',
          detail: false,
          icon: this.icons[0],
          iconWidth: 76,
          iconHeight: 76
        },
        {
          id: 1,
          left: 0,
          top: 0,
          width: 56,
          name: '填写订单',
          role: '部门成员',
          type: 'node',
          detail: true,
          params: [
            '配置=(cpu≤2)',
            '配置=(cpu≥2)'
          ],
          icon: this.icons[1],
          iconWidth: 56,
          iconHeight: 56
        },
        {
          id: 2,
          left: 0,
          top: 0,
          width: 84,
          name: '部门经理审批',
          role: '部门经理',
          type: 'node',
          detail: true,
          params: [
            '审批结果=\'通过\'',
            '审批结果=\'不通过\''
          ],
          icon: this.icons[2],
          iconWidth: 56,
          iconHeight: 56
        },
        {
          id: 3,
          left: 0,
          top: 0,
          width: 56,
          name: '执行分配',
          role: '运维人员',
          type: 'node',
          detail: true,
          params: [
            '执行结果=\'完成\'',
          ],
          icon: this.icons[3],
          iconWidth: 56,
          iconHeight: 56
        },
        {
          id: 4,
          left: 0,
          top: 0,
          width: 56,
          name: '执行分配',
          role: '运维人员',
          type: 'node',
          detail: true,
          params: [
            '执行结果=\'完成\'',
          ],
          icon: this.icons[3],
          iconWidth: 56,
          iconHeight: 56
        },
        {
          id: 5,
          left: 0,
          top: 0,
          width: 56,
          name: '流程结束',
          detail: false,
          icon: this.icons[4],
          iconWidth: 56,
          iconHeight: 56
        },
        {
          id: 6,
          left: 0,
          top: 0,
          width: 84,
          name: '部门经理审批',
          role: '部门经理',
          type: 'node',
          detail: true,
          params: [
            '审批结果=\'通过\'',
            '审批结果=\'不通过\''
          ],
          icon: this.icons[2],
          iconWidth: 56,
          iconHeight: 56
        },
        {
          id: 7,
          left: 0,
          top: 0,
          width: 70,
          name: '副总裁审批',
          role: '副总裁',
          type: 'node',
          detail: true,
          params: [
            '审批结果=\'通过\'',
            '审批结果=\'不通过\''
          ],
          icon: this.icons[2],
          iconWidth: 56,
          iconHeight: 56
        },
        {
          id: 8,
          left: 0,
          top: 0,
          name: '配置=(cpu≤2)',
          detail: false,
          comment: true
        },
        {
          id: 9,
          left: 0,
          top: 0,
          name: '审批结果=\'不通过\'',
          detail: false,
          comment: true
        },
        {
          id: 10,
          left: 0,
          top: 0,
          name: '审批结果=\'通过\'',
          detail: false,
          comment: true
        },
        {
          id: 11,
          left: 0,
          top: 0,
          name: '执行结果=\'完成\'',
          detail: false,
          comment: true
        },
        {
          id: 12,
          left: 0,
          top: 0,
          name: '执行结果=\'完成\'',
          detail: false,
          comment: true
        },
        {
          id: 13,
          left: 0,
          top: 0,
          name: '配置=(cpu≥2)',
          detail: false,
          comment: true
        },
        {
          id: 14,
          left: 0,
          top: 0,
          name: '审批结果=\'通过\'',
          detail: false,
          comment: true
        },
        {
          id: 15,
          left: 0,
          top: 0,
          name: '审批结果=\'通过\'',
          detail: false,
          comment: true
        },
        {
          id: 16,
          left: 0,
          top: 0,
          name: '审批结果=\'不通过\'',
          detail: false,
          comment: true
        }
      ];

      //流程开始
      this.nodes[0].left = sartLeftPoint;
      this.nodes[0].top = height / 2 + 45;

      //填写订单
      this.nodes[1].left = this.nodes[0].left + width * 0.15;
      this.nodes[1].top = height / 2 + 15;

      //部门经理审批
      this.nodes[2].left = this.nodes[1].left + width * 0.35;
      this.nodes[2].top = height / 4 - 15;

      //执行分配1      
      this.nodes[3].left = this.nodes[2].left + width * 0.35;
      this.nodes[3].top = height / 4 - 15;

      //完成      
      this.nodes[5].left = this.nodes[2].left + width * 0.35;
      this.nodes[5].top = height / 2 + 15;

      this.leftPointWidth = (this.nodes[2].left - this.nodes[1].left) - width * 0.25;

      //部门经理审批2
      this.nodes[6].left = this.nodes[1].left + width * 0.2 + this.leftPointWidth;
      this.nodes[6].top = height * 0.75 + 15 + this.nodes[3].iconHeight;

      //副总裁审批
      this.nodes[7].left = this.nodes[6].left + width * 0.2;
      this.nodes[7].top = height * 0.75 + 15 + this.nodes[3].iconHeight;

      //执行分配2
      this.nodes[4].left = this.nodes[7].left + width * 0.2;
      this.nodes[4].top = height * 0.75 + 15 + this.nodes[3].iconHeight;

      //注释
      this.nodes[8].left = this.nodes[2].left - this.leftPointWidth - 50;
      this.nodes[8].top = this.nodes[2].top - this.nodes[2].iconHeight / 2 + 5;

      this.nodes[9].left = this.nodes[2].left - this.nodes[1].left - this.leftPointWidth;
      this.nodes[9].top = this.nodes[2].top - this.nodes[2].iconHeight - 35;

      this.nodes[10].left = this.nodes[2].left + (this.nodes[3].left - this.nodes[2].left) / 2
      this.nodes[10].top = this.nodes[2].top - this.nodes[2].iconHeight / 2 + 5;

      this.nodes[11].left = this.nodes[5].left - this.nodes[5].width - 15;
      this.nodes[11].top = this.nodes[5].top - this.nodes[3].top;

      this.nodes[12].left = this.nodes[4].left - this.nodes[4].width - 15;
      this.nodes[12].top = this.nodes[4].top - this.nodes[3].top;

      this.nodes[13].left = this.nodes[1].left + width * 0.2 - 14;
      this.nodes[13].top = this.nodes[7].top - this.nodes[7].iconHeight / 2 - 30;

      this.nodes[14].left = this.nodes[6].left + width * 0.1 - 14;
      this.nodes[14].top = this.nodes[7].top - this.nodes[7].iconHeight / 2 - 30;

      this.nodes[15].left = this.nodes[7].left + width * 0.1 - 14;
      this.nodes[15].top = this.nodes[7].top - this.nodes[7].iconHeight / 2 - 30;

      this.nodes[16].left = this.nodes[2].left - this.nodes[1].left - this.leftPointWidth;
      this.nodes[16].top = this.nodes[6].top + 36;

    } else {
      workFlowType = 2;
      width = window.innerWidth * 0.66 - 100;
      height = window.innerHeight * 0.66 - 120;
      this.canvas.width = width;
      this.canvas.height = height;
      this.nodes = [
        {
          id: 0,
          left: 0,
          top: 0,
          width: 102,
          name: '流程开始',
          type: 'node',
          detail: false,
          icon: this.icons[0],
          iconWidth: 76,
          iconHeight: 76
        },
        {
          id: 1,
          left: 0,
          top: 0,
          width: 56,
          name: '填写订单',
          type: 'node',
          detail: false,
          icon: this.icons[1],
          iconWidth: 56,
          iconHeight: 56
        },
        {
          id: 2,
          left: 0,
          top: 0,
          width: 56,
          name: '总裁审批',
          type: 'node',
          detail: true,
          params: [
            '审批结果=\'通过\'',
            '审批结果=\'不通过\''
          ],
          icon: this.icons[2],
          iconWidth: 56,
          iconHeight: 56
        },
        {
          id: 3,
          left: 0,
          top: 0,
          width: 56,
          name: '执行分配',
          type: 'node',
          detail: true,
          params: [
            '执行结果=\'完成\'',
          ],
          icon: this.icons[3],
          iconWidth: 56,
          iconHeight: 56
        },
        {
          id: 4,
          left: 0,
          top: 0,
          width: 56,
          name: '流程结束',
          type: 'node',
          detail: false,
          icon: this.icons[4],
          iconWidth: 56,
          iconHeight: 56
        },
        {
          id: 5,
          left: 0,
          top: 0,
          name: '审批结果=\'通过\'',
          detail: false,
          comment: true
        },
        {
          id: 6,
          left: 0,
          top: 0,
          name: '执行结果=\'完成\'',
          detail: false,
          comment: true
        },
        {
          id: 7,
          left: 0,
          top: 0,
          name: '审批结果=\'不通过\'',
          detail: false,
          comment: true
        }
      ];

      //流程开始
      this.nodes[0].left = sartLeftPoint;
      this.nodes[0].top = height / 2 + 60;

      //填写订单
      this.nodes[1].left = this.nodes[0].left + width * 0.2 + 48;
      this.nodes[1].top = height / 2 + 30;

      //总裁审批
      this.nodes[2].left = this.nodes[1].left + width * 0.2;
      this.nodes[2].top = height / 2 + 30;

      //执行分配
      this.nodes[3].left = this.nodes[2].left + width * 0.2;
      this.nodes[3].top = height / 2 + 30;

      //流程结束
      this.nodes[4].left = this.nodes[3].left + width * 0.2;
      this.nodes[4].top = height / 2 + 30;

      //审批通过
      this.nodes[5].left = this.nodes[2].left + this.nodes[3].iconWidth + 15;
      this.nodes[5].top = height / 2 - 25;

      //执行结果完成
      this.nodes[6].left = this.nodes[3].left + this.nodes[3].iconWidth + 15;
      this.nodes[6].top = height / 2 - 25;

      //审批不通过
      this.nodes[7].left = this.nodes[3].left - 15;
      this.nodes[7].top = height / 2 + 90;
    };

    this.drawLines(workFlowType);
  }

  private drawLines(type): any {
    let ctx: CanvasRenderingContext2D = this.canvas.getContext('2d');
    switch (type) {
      case 1:
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#cbcbcb';
        ctx.rect(this.nodes[0].left, this.nodes[0].top - 60 - this.nodes[0].iconHeight / 2 - 12, this.nodes[0].iconWidth + 24, this.nodes[0].iconHeight + 24);
        ctx.stroke();
        this.esCommonService.drawIcon(ctx, this.nodes[0].left + 12, this.nodes[0].top, this.nodes[0].icon, this.nodes[0].iconWidth, this.nodes[0].iconHeight);
        this.esCommonService.drawIcon(ctx, this.nodes[1].left, this.nodes[1].top + 30, this.nodes[1].icon, this.nodes[1].iconWidth, this.nodes[1].iconHeight);
        this.esCommonService.drawIcon(ctx, this.nodes[2].left + 14, this.nodes[2].top + 30, this.nodes[2].icon, this.nodes[2].iconWidth, this.nodes[2].iconHeight);
        this.esCommonService.drawIcon(ctx, this.nodes[3].left, this.nodes[3].top + 30, this.nodes[3].icon, this.nodes[3].iconWidth, this.nodes[3].iconHeight);
        this.esCommonService.drawIcon(ctx, this.nodes[4].left, this.nodes[4].top + 30, this.nodes[4].icon, this.nodes[4].iconWidth, this.nodes[4].iconHeight);
        this.esCommonService.drawIcon(ctx, this.nodes[5].left, this.nodes[5].top + 30, this.nodes[5].icon, this.nodes[5].iconWidth, this.nodes[5].iconHeight);
        this.esCommonService.drawIcon(ctx, this.nodes[6].left + 14, this.nodes[6].top + 30, this.nodes[6].icon, this.nodes[6].iconWidth, this.nodes[6].iconHeight);
        this.esCommonService.drawIcon(ctx, this.nodes[7].left + 7, this.nodes[7].top + 30, this.nodes[7].icon, this.nodes[7].iconWidth, this.nodes[7].iconHeight);
        this.esCommonService.drawArrow(ctx, this.nodes[0].left + this.nodes[0].width - 1, this.nodes[0].top - 60, this.nodes[1].left - 10, this.nodes[1].top - 30);
        this.esCommonService.drawArrow(ctx, this.nodes[2].left + this.nodes[2].iconWidth, this.nodes[2].top - this.nodes[2].iconHeight / 2, this.nodes[3].left - 10, this.nodes[3].top - this.nodes[3].iconHeight / 2);
        this.esCommonService.drawArrow(ctx, this.nodes[6].left + this.nodes[6].iconWidth, this.nodes[6].top - this.nodes[6].iconHeight / 2, this.nodes[7].left - 10, this.nodes[7].top - this.nodes[7].iconHeight / 2);
        this.esCommonService.drawArrow(ctx, this.nodes[7].left + this.nodes[7].iconWidth, this.nodes[7].top - this.nodes[7].iconHeight / 2, this.nodes[4].left - 10, this.nodes[4].top - this.nodes[4].iconHeight / 2);
        this.esCommonService.drawArrow(ctx, this.nodes[3].left + this.nodes[3].iconWidth / 2, this.nodes[3].top + this.nodes[3].iconHeight - 30, this.nodes[5].left + this.nodes[5].iconWidth / 2, this.nodes[5].top - this.nodes[4].iconHeight - 10);
        this.esCommonService.drawArrow(ctx, this.nodes[4].left + this.nodes[4].iconWidth / 2, this.nodes[4].top - this.nodes[7].iconHeight + 30, this.nodes[5].left + this.nodes[5].iconWidth / 2, this.nodes[5].top + 30);
        this.esCommonService.drawLeftPointToPoint(ctx, this.nodes[1].left + this.nodes[1].width, this.nodes[1].top - this.nodes[1].iconHeight / 2, this.nodes[2].left - 10, this.nodes[2].top - this.nodes[2].iconHeight / 2, this.leftPointWidth);
        this.esCommonService.drawLeftPointToPoint(ctx, this.nodes[1].left + this.nodes[1].width, this.nodes[1].top - this.nodes[1].iconHeight / 2, this.nodes[6].left - 10, this.nodes[6].top - this.nodes[6].iconHeight / 2, this.leftPointWidth);
        this.esCommonService.drawUpPointToPoint(ctx, this.nodes[2].left + this.nodes[2].width / 2, this.nodes[2].top - this.nodes[2].iconHeight - 10, this.nodes[1].left + this.nodes[1].iconHeight / 2, this.nodes[1].top - this.nodes[1].iconHeight - 10, 30);
        this.esCommonService.drawUpPointToPoint(ctx, this.nodes[6].left + this.nodes[6].width / 2, this.nodes[6].top + 34, this.nodes[1].left + this.nodes[1].iconWidth / 2, this.nodes[1].top + 34, -30);
        ctx.beginPath();
        ctx.moveTo(this.nodes[7].left + this.nodes[7].width / 2, this.nodes[6].top + 34);
        ctx.lineTo(this.nodes[7].left + this.nodes[7].width / 2, this.nodes[6].top + 64);
        ctx.lineTo(this.nodes[6].left + this.nodes[6].width / 2, this.nodes[6].top + 64);
        ctx.stroke();
        break;
      case 2:
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#cbcbcb';
        ctx.rect(this.nodes[0].left, this.nodes[0].top - 60 - this.nodes[0].iconHeight / 2 - 12, this.nodes[0].iconWidth + 24, this.nodes[0].iconHeight + 24);
        ctx.stroke();
        this.esCommonService.drawIcon(ctx, this.nodes[0].left + 12, this.nodes[0].top, this.nodes[0].icon, this.nodes[0].iconWidth, this.nodes[0].iconHeight);
        this.esCommonService.drawIcon(ctx, this.nodes[1].left, this.nodes[1].top + 30, this.nodes[1].icon, this.nodes[1].iconWidth, this.nodes[1].iconHeight);
        this.esCommonService.drawIcon(ctx, this.nodes[2].left, this.nodes[2].top + 30, this.nodes[2].icon, this.nodes[2].iconWidth, this.nodes[2].iconHeight);
        this.esCommonService.drawIcon(ctx, this.nodes[3].left, this.nodes[3].top + 30, this.nodes[3].icon, this.nodes[3].iconWidth, this.nodes[3].iconHeight);
        this.esCommonService.drawIcon(ctx, this.nodes[4].left, this.nodes[4].top + 30, this.nodes[4].icon, this.nodes[4].iconWidth, this.nodes[4].iconHeight);
        this.esCommonService.drawArrow(ctx, this.nodes[0].left + this.nodes[0].width - 1, this.nodes[0].top - 60, this.nodes[1].left - 10, this.nodes[1].top - 30);
        this.esCommonService.drawArrow(ctx, this.nodes[1].left + this.nodes[1].width - 1, this.nodes[1].top - 30, this.nodes[2].left - 10, this.nodes[2].top - 30);
        this.esCommonService.drawArrow(ctx, this.nodes[2].left + this.nodes[2].width - 1, this.nodes[2].top - 30, this.nodes[3].left - 10, this.nodes[3].top - 30);
        this.esCommonService.drawArrow(ctx, this.nodes[3].left + this.nodes[3].width - 1, this.nodes[3].top - 30, this.nodes[4].left - 10, this.nodes[4].top - 30);
        this.esCommonService.drawUpPointToPoint(ctx, this.nodes[2].left + this.nodes[2].width / 2, this.nodes[2].top + 25, this.nodes[4].left + this.nodes[4].width / 2, this.nodes[4].top + 25, -60);
        break;
      default: ;
    }

    ctx.save();
    ctx.restore();
  }

  showDetail(node) {
    if (!node.detail) {
      return;
    }
    this.detail.top = node.top;
    this.detail.left = node.left + node.width + 5;
    this.detail.name = node.name;
    this.detail.role = node.role;
    this.detail.params = node.params;
    this.detail_show = true;
  }

  hideDetail() {
    this.detail_show = false;
  }

  beforeClose(): void { }

  beforeLeave(): boolean | Promise<boolean> {
    return new Promise(resolve => {
      resolve(true);
    });
  }
}
